function gettext(url, callback) {
    //1.创建AJAX的实例
    let xhr = new XMLHttpRequest();
    //2.创建AJAX的请求
    xhr.open('GET', url);
    //3.发送AJAX的请求
    xhr.send();
    //4.接收服务器相应结果
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                //获取到JSON字符串
                let respJSONStr = xhr.response;
                //将JSON字符串转换为对象的数据格式
                let res = JSON.parse(respJSONStr);
                callback(res)
            }
        }
    }
}
//获取页面需要点击的按钮
let span = document.querySelectorAll(".select>span")
let commodityDetails = document.querySelector(".commodityDetails")

//渲染进入页面的数据
gettext("scripts/data.json", function (res) {
    commodityDetails.classList.add("width")
   for(let key in res){
    //    console.log(res[key])
       let resKey = res[key]
       apply(resKey)
   }
})

//按钮点击时渲染的数据
for (let key in span) {
    span[key].onclick = function () {
        commodityDetails.classList.remove("width")
        commodityDetails.innerHTML =''
        if (key == 0) {
            gettext("scripts/data.json", function (res) {
                let CasualSandals = res.CasualSandals
                apply(CasualSandals)
            })
        }
        if (key == 1) {
            gettext("scripts/data.json", function (res) {
                let LowHelpCanvas = res.LowHelpCanvas
                apply(LowHelpCanvas)
            })
        }
        if (key == 2) {
            gettext("scripts/data.json", function (res) {
                let HighHelpCanvas = res.HighHelpCanvas
                apply(HighHelpCanvas)
            })
        }
    }
}

//封装渲染数据的函数
function apply(arr){
    arr.forEach(element => {
        commodityDetails.innerHTML += `
        <div class="commodityDetailsBox">
    <div>
        <img src="${element.image}" alt="" title="${element.name}">
    </div>
    <p>${element.name}</p>
    <span>${element.price}</span>
</div>`
    });
}